<template>
  <div class="container">

    <!--    用户信息 -->
    <div class="user-div">
      <div style="font-weight: bolder">用户信息</div>
      <br>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col span="8">
              <el-form-item label="邮箱">
                <el-input type="email" v-model="form.email" prefix-icon="el-icon-message"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8">
              <el-form-item label="账号">
              <el-input type="email" v-model="form.account" prefix-icon="el-icon-user"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="密码">
              <el-input type="password" v-model="form.password" prefix-icon="el-icon-edit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="8">
            <el-form-item label="性别">
              <el-radio-group v-model="form.gender">
                <el-radio label="男" value="男"></el-radio>
                <el-radio label="女" value="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="高考年份">
              <el-date-picker type="year" format="yyyy" value-format="yyyy" placeholder="选择年份" v-model="form.examYear" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="高考分数">
              <el-input type="number" v-model="form.score" prefix-icon="el-icon-edit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="8">
            <el-form-item label="高考位次">
              <el-input type="number" v-model="form.rank" prefix-icon="el-icon-edit"></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="科目">
              <el-radio-group v-model="form.subject">
                <el-radio label="文科"></el-radio>
                <el-radio label="理科"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="性格">
              <el-select v-model="form.attr" prefix-icon="el-icon-edit" clearable filterable style="width: 100%">
                <el-option v-for="xg in xgArr" :key="xg" :value="xg" :label="xg"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-row>
            <el-col span="6">
              <el-button type="primary" @click="updateUserInfo">更新用户信息</el-button>
            </el-col>
            <el-col span="6">
                <el-button type="primary" @click="queryRecommendHistory">志愿推荐记录</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

    <div class="star-div">
      <div style="font-weight: bolder">我的收藏</div>
      <br>
      <el-card  v-for="school in loveList" :key="school.id" class="box-card">
        <div style="padding: 10px; height: 80px" @click="showDetailDialog(school)">
          <el-row>
            <el-col span="4">
              <el-avatar :size="80" src="https://empty" @error="errorHandler">
                <img :src="school.icon"/>
              </el-avatar>
            </el-col>
            <el-col span="20">
              <el-row style="height: 30px; line-height: 30px">
                <el-col span="15">
                  <div style="font-size: x-large">{{school.name}}</div>
                </el-col>
                <el-col span="5">
                  <el-tag type="success">{{school.address}}</el-tag>
                </el-col>
                <el-col span="2">
                  <el-tag type="primary">
                    <el-link type="primary" :underline="false" style="font-size: 12px" :href="school.website" target="_blank">学校官网</el-link>
                  </el-tag>
                </el-col>
                <el-col span="2">
                  <el-tag type="primary">录取概率</el-tag>
                </el-col>
              </el-row>
              <el-row style="height: 30px; line-height: 30px; font-size: large;">
                <el-col span="20">
                  <div style="padding: 20px 0 0 0">
                    <span>{{school.level}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>综合类</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{school.type}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{school.attr}}</span>
                    <el-divider v-if="school.attr" direction="vertical"></el-divider>
                    <span>强基计划</span>
                  </div>
                </el-col>
                <el-col span="4">
                  <div style="padding: 20px 0 0 0">
                    <el-button type="warning" size="mini" icon="el-icon-star-off" circle @click="cancelLoveSchool(school)"></el-button>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

    <el-dialog title="志愿推荐结果" :visible.sync="predictDialogVisible">
      <div style="padding: 0 10px">
        <el-button type="primary" icon="el-icon-download" @click="exportToExcel">下载</el-button>
      </div>
      <el-table :data="gridData">
        <el-table-column property="sortVal" label="序号" ></el-table-column>
        <el-table-column property="schoolName" label="学校" ></el-table-column>
        <el-table-column property="professorName" label="专业"></el-table-column>
        <el-table-column property="ratio" label="录取概率"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="学校详情" :visible.sync="dialogDetailVisible">
      <div>
        <el-row>
          <el-col span="6">
            <el-avatar :size="80" src="https://empty" @error="errorHandler">
              <img :src="sitem.icon"/>
            </el-avatar>
          </el-col>
          <el-col span="18">
            <div style="font-size: 32px; margin-top: 10px"> {{sitem.name}} </div>
          </el-col>
        </el-row>
        <div style="margin: 5px 0">官网: {{sitem.website}} </div>
      </div>
      <div>
        <div style="margin: 10px 0; font-weight: bolder"> 专业分数线 </div>
        <el-table :data="majorData" height="300px">
          <el-table-column property="professorName" label="专业名称" width="150"></el-table-column>
          <el-table-column property="lowerScore" label="录取分数" width="200"></el-table-column>
          <el-table-column property="subject" label="科目" width="200"></el-table-column>
        </el-table>
      </div>

    </el-dialog>
  </div>


</template>

<script>
import {profile, queryRecommend, updateUser, listLove, deleteLove, queryMajorBySchool} from "@/api/request";
import { saveAs } from 'file-saver';
import * as XLSX from 'xlsx';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'User',
  data() {
    return {
      dialogDetailVisible: false,
      majorData: [],
      sitem: {},

      xgArr: [
          'ISTJ - 谨慎稳重型',
          'ISFJ - 守护者型',
          'INFJ - 指导者型', 'INTJ - 架构师型', 'ISTP - 冒险家型', 'ISFP - 艺术家型', 'INFP - 诗人型', 'INTP - 思想家型',
          'ESTP - 开拓者型', 'ESFP - 表演者型', 'ENFP - 公关型', 'ENTP - 挑战者型', 'ESTJ - 管理者型', 'ESFJ - 主人型', 'ENFJ - 教师型',
          'ENTJ - 领袖型'
      ],
      form:{},
      gridData: [],
      headers: [
        { key: 'sortVal', title: '序号' },
        { key: 'schoolName', title: '学校' },
        { key: 'professorName', title: '专业' },
        { key: 'ratio', title: '录取概率' }
      ],
      predictDialogVisible: false,
      loveList: []
    }
  },

  methods: {

    showDetailDialog(item){
      console.log(item)
      queryMajorBySchool(item.name).then(res => {
        this.majorData = res.data
      })
      this.dialogDetailVisible = true
      this.sitem = item
    },

    cancelLoveSchool(school){
      const user = JSON.parse(sessionStorage.getItem('user'))
      deleteLove(school.id, user.id).then(res => {
        if (res.code === 200) {
          this.queryLoveSchoolList()
        }
      })
    },

    exportToExcel() {
      // 根据自定义表头创建表格数据数组
      const worksheetData = [
        this.headers.map(header => header.title), // 表头行
          ...this.gridData.map(item => this.headers.map(header => item[header.key])) // 数据行
      ];
      console.log(worksheetData)
      // 转换数据并导出 Excel
      this.saveExcel(worksheetData, '志愿推荐表格.xlsx');
    },
    saveExcel(worksheetData, fileName) {
      const ws = XLSX.utils.aoa_to_sheet(worksheetData);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }

      saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), fileName);
    },

    queryUserInfo(){
      const user = JSON.parse(sessionStorage.getItem('user'))
      profile(user.id).then(res => {
        console.log(res)
        this.form = res.data
        this.form.examYear = this.form.examYear + ''
      })
    },

    updateUserInfo(){
      updateUser(this.form).then(res => {
        if (res.code === 200) {
          this.queryUserInfo()
        }
      })
    },

    queryRecommendHistory(){
      const user = JSON.parse(sessionStorage.getItem('user'))
      queryRecommend(user.id).then(res => {
        if (res.code === 200) {
          this.gridData = res.data
          for (let i = 0; i < this.gridData.length; i++) {
            this.gridData[i].sortVal = (i + 1)
          }
          this.predictDialogVisible = true;
        }
      })
    },

    queryLoveSchoolList(){
      const user = JSON.parse(sessionStorage.getItem('user'))
      listLove(user.id).then(res => {
        console.log(res)
        this.loveList = res.data
        for (let i = 0; i < this.loveList.length; i++) {
          let school = this.loveList[i]
          school.icon = "http://localhost:8085/upload/" + encodeURIComponent(school.icon)
        }
      })
    }
  },

  created() {
    this.queryUserInfo()
    this.queryLoveSchoolList()
  }
}
</script>

<style scoped>

.star-div {
  margin: 10px 0;
}

</style>